<template>
	<z-paging ref="paging" 
		:auto="false" 
		v-model="enrolls" 
		@query="queryList"
		:style="{
			height: $device.measure.windowHeight -  60 + 'px'
			
		}" 
	>
		<template #top>
			<cu-custom :customStyle="{backgroundColor:'white',backgroundImage:'linear-gradient(45deg, #caff005e, #ff810073)'}" :isBack="false" :paddingHeight="80">
				<template #content>
					<view style="color:#555">我的报名</view>
				</template>
			</cu-custom>
			
			<view  style="width:100%;display: flex;justify-content: space-between;align-items:center;background-color: #eee;">
				<view v-for="(item,index) in tabs" @click="onTabClick(item,index)" style="flex: 1 0 0;padding:10px;overflow: hidden;border-radius: 15px 15px 0 0;"
					:style="{
						backgroundColor:tabIndex==index? 'white':'#eee',
						color:tabIndex==index?'red' :'#666'
					}"
				>
					<view style="display: flex;align-items: center;justify-content: center;">
						{{item.label}}
					</view>
				</view> 
			</view> 
		</template>
		
		<template #empty>
			<view style="background-color: white;padding-top: 100px;">
				<u-empty
				        mode="list"
				        :icon="absUrl('/static/empty-list.jpg')"
						width="160"
						height="160"
				>
				</u-empty>
				
				<view style="margin: 50px;">
					<u-button> 马上去报名 </u-button>
				</view>
			</view>
		</template>
		
		<!-- 报名列表 -->
		<view v-for="(enroll,index) in enrolls" style="box-shadow:rgb(146 146 146 / 25%) 0px 1px 4px 0px;;background-color: #fff;border-radius: 10rpx; margin: 15px 10px;padding:5px">
				<view style="display: flex;justify-content: space-between;flex-direction: column;border-bottom: solid 1rpx #eee;padding: 15rpx;">
					<!-- 上排 -->
					<view style="display: flex;justify-content: space-between;align-items: flex-start;">
						<view style="font-size: 32rpx;margin-bottom: 10rpx;">
							{{enroll.project.title}}
						</view>
						<view style="display: flex;align-items: center;">
							<text style="font-size: 13px;margin-right: 5px;">{{enroll.project.start_date}}</text>
							<span style="font-size: 18rpx;color:#9c9c9c;">前天</span>
						</view>
					</view>
					
					<view style="display: flex;align-items: flex-end;justify-content: space-between;">
						<view>
							<span style="
							font-size: 24rpx; 
							color:#b6b6b6;"
							>广东掌聘人力资源有限公司</span>
							<span style="
								background-color: #fff6c7;
								border-radius: 100rpx;
								padding: 6rpx 20rpx;
								margin-left: 14rpx;
								text-align: center;
								color: #ff8725;
								font-size: 20rpx;
								">企业认证</span>
						</view>
							
						<view @click="onView(enroll)" class="cu-btn round" style="
								display: flex;
								border-radius: 250px;
								font-size: 28rpx;
								background-color: #ff8725;
								color: white;
								height: 56rpx;
								width: 150rpx;
							"> 
							查看
						</view>
					</view>
				</view> 
		
			<!-- 班次时间 -->
			<view class="job-list bottom_line" style="background-color: white;border-radius: 5px;margin:0 10rpx;">
				<view class="job-item" style="padding: 5px 5px;display: flex;justify-content: space-between;align-items: center;">
					<view style="width:28%;font-size: 14px;">{{enroll.expected_job.name}}</view>
					<view style="width:37%;font-size: 14px;text-align: center;">
						<view>{{fixedTime(enroll.expected_job.start_time)}} 上班</view>
						<view>{{fixedTime(enroll.expected_job.end_time)}} 下班</view>
					</view>
					<view style="width:35%;text-align:right;"> 
						<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{enroll.expected_job.price}}元/{{enroll.expected_job.price_type}}/{{enroll.expected_job.settle_type}}</span>
						<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
					</view>
				</view>
			</view>
			
			<view style="padding: 5px 10px 5px;margin:5px 0">
				<view style="display: flex;align-items: center;font-size: 14px;">
				  <view style="margin-right: 5px;">下一步:</view>
				  <view style="font-size: 12px;color:white;padding:1px 8px;border-radius: 50px;background-color: limegreen;">
					{{state[enroll.state_step]}}
				  </view>
				</view>
			</view>
		</view>
	</z-paging>
	<!-- 底部导航条 -->
	<tabbs></tabbs>
</template>

<script>
	import jobData from '@/utils/data/workData.js'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'

	import tabbs from '@/pages/tabbs/tabbas.vue'
	export default {
		components:{tabbs},
		mixins:[jobData,timeTextFormat],
		data() {
			return {
				state:[
					'未报名',
					'加群确认',
					'签到打卡',
					'签退打卡',
					'等待验收',
					'等待发薪',
					'项目完结',
				],
				tabs:[
					{
						label:'最近',
						type:'recent',
					},
					{
						label:'历史',
						type: 'history'
					}
				],
				tabItem:null,
				tabIndex:-1,
				enrolls:[],
			}
		},
		computed: {
			name() {
				return this.data 
			}
		},
		onLoad(){
			
		},
		created() {
			
		},
		mounted(){
			let that = this
			
			setTimeout(async ()=>{
				that.onTabClick(this.tabs[0],0)
				
				console.log('FFFFFFFFFFFFFFFFFFFFFFFx')
				// that.$refs.paging.reload()
			},500)
		},
		methods: {
			onTabClick(item,index){
				if(this.tabIndex != index)
				{
					this.tabItem = item
					this.tabIndex = index
					
					this.$refs.paging.reload()
				}
			},
			async queryList(){
				console.log('22FFFFFFFFFFFFFFFFFFFFFFFx')
				uni.showLoading({
					title: '正在加载'
				})
				 
				let res = await this.$http.get(`/user/job/enroll/list?type=${this.tabItem.type}`,{cache:this.$cache1m})
				
				uni.hideLoading()
				
				//that.enrolls = res.data
				console.log(res)
				
				this.$refs.paging.complete(res.data)
			},
			async onView(enroll)
			{
				// console.log(enroll)
				
				// this.pageParam.enroll = enroll
				
				// let res = await this.$http.get('/common/job/task',{
				// 	params:{
				// 		task_id:enroll.job_task_id
				// 	}
				// })
				
				// console.log(res.data)
				
				// this.pageParam.job_state.task = res.data
				
				uni.navigateTo({
					url:`/pages/job/user/job-state/job-state?task_id=${enroll.job_task_id}`
				})
			}
		}
	}
</script>

<style scoped>
	
	.job-list .job-item {
		border-bottom:solid 1rpx #eee;
	}
	
	.job-item:last-child {
		border-bottom: none;
	}
</style>
